<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import router from '../router';
import * as CommonApi from "../api/CommonApi";
import { ElMessage } from 'element-plus';
import ErrorConfig from '../config/ErrorConfig';
import { useTokenStore } from '../store/UseTokenStore';
import { useUserInfoStore } from '../store/UseUserInfoStore';
import SystemConstant from '../common/SystemConstant';
import { UserInfo } from '../domain/entity/UserInfo';
const userInfoManager = useUserInfoStore();
const tokenManager = useTokenStore()
const formSize = ref('default')
const formRef = ref<FormInstance>()
const form = reactive({
    username: '',
    password: '',
})
const loginRqquest = ref(false);
const formRuleList = reactive<FormRules>({
    username: [
        { required: true, message: '[username] 不可为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '[password] 不可为空', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loginRqquest.value = true;
            CommonApi.login(form.username, form.password)
                .then(response => {
                    let userInfo:UserInfo = response.data.data!;
                    tokenManager.setToken(userInfo.token!);
                    userInfoManager.updateUserInfo();
                    ElMessage.success("登录成功")
                    router.push(SystemConstant.indexRoutePath);
                }).finally(() => {
                    loginRqquest.value = false;
                });
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<template>

    <el-container>
        <el-main>
            <el-row align="middle" justify="center">
                <el-card shadow="always">
                    <h3 style="text-align: center;">Login</h3>
                    <el-form @submit.native.prevent label-width="120px" ref="formRef" :model="form"
                        :rules="formRuleList" :size="formSize">

                        <el-form-item label="username" prop="username">
                            <el-input v-model="form.username" />
                        </el-form-item>

                        <el-form-item label="password" prop="password">
                            <el-input v-model="form.password" type="password" show-password />
                        </el-form-item>

                        <el-form-item>
                            <el-button :loading="loginRqquest" ref="submitButtonRef" native-type="submit" type="primary"
                                @click="submitForm(formRef)">
                                Login
                            </el-button>
                            <el-button :disabled="loginRqquest" @click="resetForm(formRef)">Reset</el-button>
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-row>
        </el-main>
    </el-container>



</template>

<style scoped>
.el-container {
    height: 100%;
}

.el-row {
    height: 100%;
}
</style>
